<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="list-to-detail/list-to-detail.css" />
		<style type="text/css">
			.mui-icon-closeempty:before {content: '\e460';font-size: 52px;color: #35d0c9;}
			a.cardLink{width: 49%;min-height: 44px;line-height: 44px;text-align: center;background-color: #35d0c9;color: #fff;}
			.mui-bar-tab .footLink.mui-tab-item.mui-active {background-color: #35d0c9;color: #fff;}
			li.dateList{padding: 12px !important;}
			li.dateList span{font-size: 14px; color:#323232;}
			.dateItem{width: 33.33333% !important;border: solid 2px #35D0C9;margin-right: 3px;font-size: 14px !important;color: #333333;}
			.dateUl{background-color: transparent;}
			.xinlu_infor{background-color: #ffffff;}
			.dateItemUl{background-color: transparent;}
			.calendar-container{display: none;position: absolute;z-index: 999;}
			i.jiange{font-style: normal;visibility: hidden;}
			.xinlu_info dl dd{margin: 10px;}
			.sellPoint{border-top: #35d0c9 2px dashed;border-bottom: #35d0c9 2px dashed;}
			.sellPoint span{padding: 10px;text-align: center;display: inline-block;width: 100%;}
			.mui-icon-star-filled:before {content: '\e438';color: #35d0c9;}
			.sellPoint p{padding: 10px;text-align: center;}
			.circuit{}
			.circuit ul{padding: 10px;}
			.circuit ul li{list-style: none;margin-bottom: 12px;width: 100px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;background-color: #35d0c9;display: inline-block;}
			.circuit ul li a{color: #fff;display: inline-block;width: 100px;text-align: center;font-size: 14px;padding: 6px;}
			#cirItem1 dl dd{margin-left: 3px;}
			button.more{    margin: 10px auto;background-color: transparent;color: palevioletred;border: solid 2px #35D0C9;border-radius: 10px; padding: 4px;width: 38%;}
			div.xinluDes{position: absolute !important;opacity: 0.5 !important;background: #000 !important;color: #fff !important;height: 50px !important;font-family: '微软雅黑';font-size: 18px !important;bottom: 5px !important;line-height: 50px !important;box-shadow: 0px 0px 6px #000;http://127.0.0.1:8020/travel/img/xianlu_pic3.jpg}
			img.xinluImg{height: 200px !important;}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {background-color: #35d0c9;}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {color: #35D0C9;border-bottom: 2px solid #007aff; background: 0 0;}
			img.freeImg{line-height: 100px !important;max-width: 150px !important;height: 100px !important;}
			p.freeDes{    white-space: normal !important;}
			.tripGroup dl dd{margin-left: 0px;padding: 4px;}
		</style>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<!--<script src="js/mui.min.js"></script>-->
	</head>

	<body>

		<div class="mui-content mui-scroll" style="margin-bottom: 50px;">
			<!--顶部banner图 开始-->
			<div id="kr-article-banner" class="kr-article-banner">
				<div id="kr-article-cover" class="kr-article-cover">
					<img :src="cover">
				</div>
				<h2 id="kr-article-title" class="kr-article-title">{{title}}</h2>
			</div>
			<!--顶部banner图 结束-->
			<!--此线路简介  s-->
            <div class="xinlu_infor  ">
            	
            	<ul class="mui-table-view dateUl">
            	    <li class="mui-table-view-cell mui-media">
            	        <a href="javascript:;">
            	            <!--<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">-->
            	            <div class="mui-media-body mui-ellipsis" style="color: #000000;">
            	                {{title}}
            	                <p><span style="color: orangered;" id="price">￥1590起/人</span></p>
            	            </div>
            	        </a>
            	    </li>
            	    <li class="mui-table-view-cell">
            	    	<div class="mui-slider">
            	    		<p style="color: orangered;margin-bottom: 11px;" id="dateMsg"><i id="info" style="font-style: normal;">2017-6-28（周三出发）</i><span><a class="mui-pull-right" id="date" style="color: #35D0C9;">日期选择</a></span></p>
            	    	  <div class="mui-slider-group">
            	    	    <!--第一个内容区容器-->
            	    	    <div class="mui-slider-item mui-col-xs-4 dateItem">
            	    	      <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
            	    	          <li class="mui-table-view-cell mui-media  dateList">
            	    	          		<span>06-28<i style="visibility: hidden;">z</i>周三</span>
            	    	                <span>￥1580</span>
            	    	          </li>
            	    	        
            	    	      </ul>
            	    	    </div>
            	    	    <!--第二个内容区-->
            	    	    <div class="mui-slider-item mui-col-xs-4 dateItem">
            	    	      <!-- 具体内容 -->
            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
            	    	          <li class="mui-table-view-cell mui-media  dateList">
            	    	                 <span>06-29<i style="visibility: hidden;">z</i>周四</span>
            	    	                 <span >￥1580</span>
            	    	          </li>
            	    	      </ul>
            	    	    </div>
            	    	    <!--第三个内容区  s-->
            	    	     <div class="mui-slider-item mui-col-xs-4 dateItem">
            	    	      <!-- 具体内容 -->
            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
            	    	          <li class="mui-table-view-cell mui-media  dateList">
            	    	                 <span>06-30<i style="visibility: hidden;">z</i>周五</span>
            	    	                 <span>￥1580</span>
            	    	          </li>
            	    	      </ul>
            	    	    </div>
            	    	    <!--第三个内容区  e-->
            	    	    <!--第四个内容区  s-->
            	    	     <div class="mui-slider-item mui-col-xs-4 dateItem">
            	    	      <!-- 具体内容 -->
            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
            	    	          <li class="mui-table-view-cell mui-media  dateList">
            	    	                 <span>07-01<i style="visibility: hidden;">z</i>周六</span>
            	    	                 <span>￥1580</span>
            	    	          </li>
            	    	      </ul>
            	    	    </div>
            	    	    <!--第四个内容区  e-->
            	    	    <!--第五个内容区  s-->
            	    	     <div class="mui-slider-item mui-col-xs-4 dateItem">
            	    	      <!-- 具体内容 -->
            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
            	    	          <li class="mui-table-view-cell mui-media  dateList">
            	    	                 <span>07-02<i style="visibility: hidden;">z</i>周日</span>
            	    	                 <span>￥1580</span>
            	    	          </li>
            	    	      </ul>
            	    	    </div>
            	    	    <!--第五个内容区  e-->
            	    	    <!--第六个内容区  s-->
            	    	     <div class="mui-slider-item mui-col-xs-4 dateItem">
            	    	      <!-- 具体内容 -->
            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
            	    	          <li class="mui-table-view-cell mui-media  dateList">
            	    	                 <span>07-03<i style="visibility: hidden;">z</i>周一</span>
            	    	                 <span>￥1580</span>
            	    	          </li>
            	    	      </ul>
            	    	    </div>
            	    	    <!--第六个内容区  e-->
            	    	     
            	    	  
            	    	  </div>
            	    	</div>
            	    </li>
            	</ul>
                 <!--产品信息      s-->
            <div class="xinlu_info">
            	<dl>
            		<dd>产品编号<i class="jiange">银</i><span>3773357672</span></dd>
            		<dd>产品团号<i class="jiange">银</i><span>东华市</span></dd>
            		<dd>出发到达<i class="jiange">音</i>北京-渭南、西安</dd>
            		<dd>出游天数<i class="jiange">音</i>跟团游；4天3晚</dd>
            		<dd>交通方式<i class="jiange">音</i>火车去火车回</dd>
            		<dd>住宿标准<i class="jiange">音</i>2晚舒适型住宿；1晚经济型住宿</dd>
            		<dd>经典景点<i class="jiange">音</i>秦始皇兵马俑博物馆&nbsp;&nbsp;华山</dd>
            	</dl>
            </div>
            <!--产品信息      e-->
            
            <!--供应商说卖点  s-->
            <div class="sellPoint">
            	<span><a class="mui-icon mui-icon-star-filled" style="font-size: 22px;"></a><a class="mui-icon mui-icon-star-filled"></a>供应商说卖点<a class="mui-icon mui-icon-star-filled"></a><a class="mui-icon mui-icon-star-filled" style="font-size: 22px;"></a></span>
            	<p>听华阴老腔、品美食自助餐、赠明城墙、大明宫电瓶商</p>
            </div>
            <!--供应商说卖点  e-->
            
            <!--线路相关     s-->
            <div class="circuit" style="overflow: auto;"> 
            <div class="mui-slider" style="background-color: #fff;">
			    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			        <a class="mui-control-item item mui-active zs" href="#item1" id="test1">费用信息</a>
			        <a class="mui-control-item item zs" href="#item2">线路特色</a>
			        <a class="mui-control-item item zs" href="#item3">行程介绍</a>
			        <a class="mui-control-item item zs" href="#item4">预定须知</a>
			    </div>
			    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
			    <div class="mui-slider-group tripGroup">
			        <div id="item1" class="mui-slider-item mui-control-content mui-active zItem">
			            <dl>
             			<dt style="text-align: center;">费用包含</dt>
             			<dd>交通：含北京首都机场至西安咸阳机场经济舱机票（出发时间为我公司指定航班）</dd>
             			<dd>含机场建设费和燃油附加税往返程经济舱机票（含税）</dd>
             			<dd>住宿：包含该5晚行程所列参考酒店或同等级酒店住宿升级为C等酒店（商务型酒店）加收50人/晚；升级为D等酒店（未挂牌四星酒店）加收80人/晚</dd>
             			<dd>用餐：行程中团队标准用餐，2早餐2正餐<br>
             			    早餐为酒店赠送，不吃不退，正餐：一餐为自助餐，一餐为观众6大碗，四餐为8菜1汤桌餐
             			</dd>
             			<!--<dd>门票：行程中所列景点首道大门票</dd>
             			<dd>唐.华清宫+秦始皇兵马俑博物院+唐大明宫国家遗址公园+大明宫传奇+大雁塔北广场+钟楼广场+回民街+发现.回坊主题活动</dd>
             			<dd>导服：当地中文导游服务</dd>
             			<dd>儿童：年龄2~12岁（含巴士车位及半餐）其他费用敬请自理</dd>
             			<dd>用车：跟团游期间的用车费用</dd>
             			<dd>接送：由公司派专职人员机场接送</dd>
             			<dd>保险：全程含旅行社责任险，强烈建议游客自行有买旅游意外险</dd>
             			<dt style="text-align: center;">费用不含</dt>
             			<dd>1.不提供自然单间，产生单房差或加床费自理。非免费餐饮费、洗衣、电话、饮料、烟酒、付费电视、行李搬运等</dd>
             			<dd>2.自由活动期间交通费、餐费、等私人费用</dd>
             			<dd>3.行程中未提到的其他费用：如特殊门票、游轮、景区内二道门票、观光车、缆车、索道、动车票</dd>
             			<dd>4.费用包含中不包含的其他费用</dd>-->
             		</dl>
			        </div>
			        <!--线路特色   s-->
			        <div id="item2" class="mui-slider-item mui-control-content zItem">
			            <dl>
			            	<dt style="text-align: center;">线路特色</dt>
			            	<dd>玩嗨：西安首家联手韩国TBS团队倾情打造参与式美食娱乐活动【发现.回坊】，五个任务，若干小队
			            	在美食向导精心设计的游戏环节中寻“饱”，赢，精美礼品；
			            	</dd>
			            	<dd>咥美：坊上美食文化街【回民街】，一站式吃遍陕西美食；</dd>
			            	<dd>超值：赠送欣赏大明宫景区内3D IMIX电影《大明宫传奇》</dd>
			            	<dd>贴心：提供免费休息等候区</dd>
			            	<dd>无忧：全程优秀团队化操作</dd>
			            </dl>
			        </div>
			        <!--线路特色   e-->
			        <!--行程介绍   s-->
			         <div id="item3" class="mui-slider-item mui-control-content zItem">
			            <dl><dt style="text-align: center;">行程介绍</dt>
			            <dd>【全天安排】</dd>
			            <dd>【北京首都机场】自行乘坐航班前往文明古都【西安咸阳机场】，抵达西安咸阳机场后，我公司接站员在机场接站，
			            	送入酒店入住，根据抵达时间自由活动。
			            </dd>
			            <dd>【机票信息】</dd>
			            <dd>1.包含了【北京首都机场】-【西安咸阳机场】经济舱往返特价机票，出发时间为约定好的航班。</dd>
			            <dd>【温馨提示】</dd>
			            <dd>因散客拼团，每批游客的火车/航班抵达时间不同，抵达后需要等候的情况，希望您见谅。</dd>
			            <dd>【美食推荐】</dd>
			            <!--<dd>1.西安是西部旅游名城，也是著名的美食与小吃之城，在这里可以尽情的想用三秦美食。</dd>
			            <dd>2.西安具有浓郁的西北风情，各地当地小吃多到数不过来，	Biang Biang面、肉夹馍、羊肉泡馍、凉皮、岐山面、
			            饺子宴、是很多人耳熟能祥的陕西名吃。</dd>--></dl>
			        </div>
			        <!--行程介绍  e-->
			         <!--预定须知   s-->
			         <div id="item4" class="mui-slider-item mui-control-content zItem">
			            <dl>
			            	<dd>【选择线路】在Qunar频道选择线路</dd>
			            	<dd>【填写订单】完成预订信息的填写，点击“确认订单”按钮之后，我们将向您发送短信，以确认收到您的订单</dd>
			            	<dd>【在线支付】及时确认产品，下单后即可通过网银或支付平台进行支付。</dd>
			            	<dd>【电话预约】支付成功后，请拨打供应商电话，预约出行具体事宜，并将消费码提供给供应商，消费码确认后，
			            	供应商与您之间的订单合同才成立。</dd>
			            	<dd>预约确定出行事宜后，就可以开心出游啦</dd>
			            </dl>
			         </div>
			         <!--预定须知   e-->
			    </div>
			</div>
           
            </div> 
            <!--线路相关     e-->
            </div>
            <!--此线路简介  e-->
			
			

		</div>
		<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
				<div class="mui-card">
					<div class="mui-card-header mui-card-media">
						<img src="img/touxiang.jpg" />
						<div class="mui-media-body" style="position: relative;">
							小M
							<p>发布于 2016-06-30 15:30</p>
							<a class="mui-card-link" href="#forward" style="position: absolute;right: -16px;top: -4px;"><span class="mui-icon mui-icon-closeempty"></span></a>
						</div>
					</div>
					<div class="mui-card-content" style="padding: 12px;">
						<dl>
							<dd>营业电话:<i style="visibility: hidden;">即</i>4008-197-888转6417</dd>
							<dd>营业时间:<i style="visibility: hidden;">即</i>09:00-22:00</dd>
						</dl>
					</div>
					<div class="mui-card-footer">
						<a   style="" class="mui-col-xs-6 cardLink">在线咨询</a>
						<a class="mui-col-xs-6 cardLink">拨打电话</a>
						
					</div>
				</div>
			</div>
			<!--咨询 end-->

		<!--footer start-->
		<div class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active footLink" data-id="home" href="#forward">
				<span class="mui-tab-label">咨询</span>
			</a>
			<a class="mui-tab-item footLink" data-id="tripline" href="javascript:void(0);" id="order"> 
				<span class="mui-tab-label">立即预定</span>
			</a>
		</div>
		<!--footer end-->
			<script src="js/mui.min.js"></script>
			<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				mui.init();

				function getDefaultData() {
					return {
						cover: '',
						title: '',
						author: '',
						time: '',
						content: ''
					}
				}

				var vm = new Vue({
					el: '.mui-content',
					data: getDefaultData(),
					methods: {
						resetData: function() { //重置数据
							//						Object.assign(this.$data, getDefaultData());
						}
					}
				});

				//监听自定义事件，获取新闻详情
				document.addEventListener('get_detail', function(event) {
					var guid = event.detail.guid;
					if(!guid) {
						return;
					}
					//前页传入的数据，直接渲染，无需等待ajax请求详情后
					vm.cover = event.detail.cover;
					vm.title = event.detail.title;
					vm.author = event.detail.author;
					vm.time = event.detail.time;
					//向服务端请求文章详情内容
					mui.ajax('http://spider.dcloud.net.cn/api/news/36kr/' + guid, {
						type: 'GET',
						dataType: 'json', //服务器返回json格式数据
						timeout: 15000, //15秒超时
						success: function(rsp) {
							vm.content = rsp.content;
						},
						error: function(xhr, type, errorThrown) {
							mui.toast('获取文章内容失败');
							//TODO 此处可以向服务端告警
						}
					});
				
				    
				     var webview_order=null;
                 	//预加载订单页面  s
                      mui.plusReady(function(){
                      	
                      	//将price暂存在本地
                      	 var price=document.getElementById("price").innerText;
                   		 plus.storage.setItem("price",price);
                   		 //将出发日期暂存在本地
                   		 var yourDate=document.getElementById("info").innerHTML;
                   		 plus.storage.setItem("yourDate",yourDate);
                   		 
                   		 
               
                      	webview_order=mui.preload({
                      		url :'order.html',
//                    		id:'news_order',
                      		styles:{
                      			    "render": "always",
									"popGesture": "hide",
									"bounce": "vertical",
									"bounceBackground": "#efeff4",
                      		}
                      	})
                      });
                      //预加载订单页面   e
                      
				          //点击立即预定的时，进入加入订单页面
              document.getElementById("order").addEventListener("tap",function(){
//            	alert(111);
//            	mui.openWindow({
//            		url:"order.html",
//            	})


               //end
              
                 open_order(guid,vm.title,vm.cover);
               
               


              })
				
				//打开订单
				function open_order(guid,title,cover){
					//若订单页尚未加载完成，则等待执行
					if(!webview_order) {
						setTimeout(function() {
							open_order(guid);
						}, 100);
					}
					//触发自窗户口的事件
					mui.fire(webview_order,"get_order",{
						guid:vm.title,
						title:vm.title,
						cover:vm.cover
					})
					setTimeout(function(){
						webview_order.show("slide-in-right",300);
					},150);
					
					
				}
				
				
				
				
				
				});

				//重写返回逻辑
				mui.back = function() {
					plus.webview.currentWebview().hide("auto", 300);
					//动画结束后，恢复默认值
					setTimeout(function() {
						window.scrollTo(0, 0);
						vm.resetData();
					}, 300);
				}
			</script>
	        <script type="text/javascript">
				//date 选择
		        	$(".dateItem").click(function(){
		        		$(this).css({"background":"#35d0c9"}).siblings().css({"background":"#fff"});
		        		$(this).find("li.dateList span").css({"color":"#fff"});
		        		$(this).siblings().find("li.dateList span").css({"color":"#323232"});
		        	});
	        		var info=document.getElementById("info");
	        	//日历的隐藏和显示
		        	$("#date").click(function(){
								var dDate = new Date();
								dDate.setFullYear(2016, 6, 27);
								var minDate = new Date();
								minDate.setFullYear(2010, 0, 1);
								var maxDate = new Date();
								maxDate.setFullYear(2020, 11, 25);
								plus.nativeUI.pickDate(function(e) {
									var d = e.date;
									info.innerText = '您选择的出发日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
								}, function(e) {
	//								info.innerText = "您没有选择日期";
								}, {
									title: "请选择日期",
									date: dDate,
									minDate: minDate,
									maxDate: maxDate
								});
	        	   });
	       
 
 
 
                 
 
 
 
 
           
	        
	        
	        
	        </script>
	       
	</body>

</html>